<template>
    <div class="bg-white border-b border-gray-200 px-4 py-2 flex items-center gap-2 overflow-x-auto">
        <!-- 标签列表 -->
        <div
            v-for="tag in tagStore.tags"
            :key="tag.path"
            :class="[
                'flex items-center gap-2 px-4 py-1.5 rounded cursor-pointer transition-all text-sm whitespace-nowrap',
                currentRoute === tag.path 
                    ? 'bg-blue-500 text-white shadow-md' 
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            ]"
            @click="handleTagClick(tag.path)"
            @contextmenu.prevent="handleContextMenu($event, tag)"
        >
            <span>{{ tag.name }}</span>
            <el-icon
                v-if="tag.closable"
                class="hover:bg-black/10 rounded-full p-0.5 transition-colors"
                @click.stop="handleClose(tag.path)"
            >
                <Close />
            </el-icon>
        </div>

        <!-- 右键菜单 -->
        <div
            v-if="contextMenuVisible"
            :style="{ left: contextMenuPosition.x + 'px', top: contextMenuPosition.y + 'px' }"
            class="fixed bg-white shadow-lg rounded-lg border border-gray-200 py-1 z-50 min-w-[120px]"
            @mouseleave="contextMenuVisible = false"
        >
            <div
                class="px-4 py-2 hover:bg-gray-100 cursor-pointer text-sm text-gray-700"
                @click="handleCloseOthers"
            >
                关闭其他
            </div>
            <div
                class="px-4 py-2 hover:bg-gray-100 cursor-pointer text-sm text-gray-700"
                @click="handleCloseAll"
            >
                关闭所有
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTagStore } from '@/stores/tagStore'
import { Close } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const tagStore = useTagStore()

// 当前路由
const currentRoute = ref(route.path)

// 右键菜单
const contextMenuVisible = ref(false)
const contextMenuPosition = ref({ x: 0, y: 0 })
const contextMenuTag = ref(null)

// 路由名称映射
const routeNameMap = {
    '/admin/index': '仪表盘',
    '/admin/article-list': '文章管理',
    '/admin/category-list': '分类管理',
    '/admin/tag-list': '标签管理',
    '/admin/blog-setting': '博客设置'
}

// 监听路由变化，添加标签
watch(() => route.path, (newPath) => {
    currentRoute.value = newPath
    
    // 获取路由名称
    const name = routeNameMap[newPath] || '未知页面'
    
    // 添加到标签列表
    if (newPath.startsWith('/admin/') && newPath !== '/admin/login') {
        tagStore.addTag({
            path: newPath,
            name: name
        })
    }
}, { immediate: true })

// 点击标签
const handleTagClick = (path) => {
    router.push(path)
}

// 关闭标签
const handleClose = (path) => {
    const tags = tagStore.tags
    const index = tags.findIndex(tag => tag.path === path)
    
    // 如果关闭的是当前标签，跳转到前一个或后一个标签
    if (currentRoute.value === path) {
        if (index > 0) {
            router.push(tags[index - 1].path)
        } else if (tags.length > 1) {
            router.push(tags[index + 1].path)
        } else {
            router.push('/admin/index')
        }
    }
    
    tagStore.removeTag(path)
}

// 右键菜单
const handleContextMenu = (event, tag) => {
    contextMenuVisible.value = true
    contextMenuPosition.value = { x: event.clientX, y: event.clientY }
    contextMenuTag.value = tag
}

// 关闭其他标签
const handleCloseOthers = () => {
    tagStore.closeOtherTags(contextMenuTag.value.path)
    contextMenuVisible.value = false
    
    // 如果当前路由被关闭，跳转到右键的标签
    if (!tagStore.tags.find(tag => tag.path === currentRoute.value)) {
        router.push(contextMenuTag.value.path)
    }
}

// 关闭所有标签
const handleCloseAll = () => {
    tagStore.closeAllTags()
    contextMenuVisible.value = false
    router.push('/admin/index')
}

// 点击页面其他地方关闭右键菜单
document.addEventListener('click', () => {
    contextMenuVisible.value = false
})
</script>

<style scoped>
/* 滚动条样式 */
::-webkit-scrollbar {
    height: 4px;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}
</style>
